<template>
  <div>
    <header class="bookxq">
      <div class="title">
        <router-link to class="left">
          <span class="ui-leftaw-2" @click="$router.back(-1)"></span>
          <!-- <span class="ui-leftaw-2"></span> -->
        </router-link>
        <div class="tit-top">
          <h3>注册页面</h3>
        </div>
      </div>
    </header>
    <loading v-if="isLoading" :msg="msg"></loading>
    <div class="frome">
      <div class="form">
        <div class="name">
          <input v-model="user.name" type="text" placeholder="请输入用户名" />
        </div>
        <div class="id">
          <input v-model="user.id" type="text" placeholder="请输入账号" />
        </div>
        <div class="password">
          <input v-model="user.pwd" type="password" placeholder="请输入密码" />
        </div>
        <div class="newuser">
          <router-link to="/login">已有账号，点击立即登录</router-link>
        </div>
        <div class="post">
          <button @click="loginFunc">注册账号</button>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
import Loading from "@/components/loading/longincg.vue";
import src from "@/assets/icon_user.png";
export default {
  data() {
    return {
      user: {
        name: "",
        id: "",
        pwd: "",
        src: src,
      },
      isLoading: false,
      msg: "",
    };
  },
  components: {
    Loading,
  },
  methods: {
    loginFunc() {
      if (this.user.id == "" || this.user.name == "" || this.user.pwd == "") {
        this.msg = "输入框不能为空";
        this.isLoading = true;
        const that = this;
        setTimeout(function () {
          that.isLoading = false;
        }, 1200);
        return;
      } else {
        let resid = /\d{6,8}/;
        let resname = /\w{3,}/;
        let respsw = /\d{3,8}\D{3}/;
        if (resid.test(this.user.id) !== true) {
          this.msg = "请正确输入id,id格式为任意六位数字";
          this.isLoading = true;
          const that = this;
        setTimeout(function () {
          that.isLoading = false;
        }, 1200);
          return;
        }
        if (resname.test(this.user.name) !== true) {
          this.msg = "请正确输入用户名，用户名格式为任意三位及以上字母或数字";
          this.isLoading = true;
          const that = this;
        setTimeout(function () {
          that.isLoading = false;
        }, 1200);
          return;
        }
        if (respsw.test(this.user.pwd) !== true) {
          this.msg ="请正确输入密码，密码格式为任意三到六位数字与任意三位非数字";
          this.isLoading = true;
          const that = this;
        setTimeout(function () {
          that.isLoading = false;
        }, 1200);
          return;
        }
        let user = this.user;
        console.log(user);
        localStorage.setItem("user", JSON.stringify(user));
        this.msg ="注册成功，开始跳转"
        this.isLoading = true;
        const that = this;
        setTimeout(function () {
          that.isLoading = false;
          that.$router.push({ path: "login" });
        }, 1200);
      }
    },
  },
};
</script>
  <!-- https://apis.netstart.cn/yunyuedu/ -->
  <style lang="scss">
@import url(../../static/css/reset.css);
.frome {
  // background: black;
  padding: 20px;
  .form {
    margin: 0 auto;
    width: 98%;
    color: #bdbdbd;
    // background-color: black;
    text-align: center;
    input {
      padding: 7px;
      width: 100%;
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;
      border: 1px solid #bdbdbd;
      border-radius: 3px;
    }
    button {
      width: 90%;
      height: 40px;
      margin-top: 10px;
      box-sizing: border-box;
      background: #ebebe6;
      color: #aba499;
      border: 1px solid transparent;
      border-radius: 5px;
    }
    .newuser {
      margin-top: 10px;
      a {
        cursor: pointer;
        color: #bbb7b7;
      }
    }
  }
}
.bookxq {
  width: 100%;
  background-color: black;
  min-width: 362px;
  .title {
    margin: auto 1%;
    height: 44px;
    line-height: 44px;
    a.left {
      float: left;
      font-size: 14px;
      .ui-leftaw-2 {
        display: inline-block;
        margin-bottom: 3px;
        margin-left: 15px;
        vertical-align: middle;
        width: 10px;
        height: 18px;
        background: url(../../static/imgs/arrow-left.png);
        background-size: 100% 100%;
      }
    }
    .tit-top {
      padding: 0 5%;
      box-sizing: border-box;
      text-align: center;
      h3 {
        width: 30%;
        display: inline-block;
        color: white;
      }
    }
  }
}
</style>